import React from 'react'
import {View, StyleSheet, Text} from 'react-native'
import {PagerTabIndicator, IndicatorViewPager} from 'rn-viewpager';
import ShortcutNavigator from '../containers/ShortcutContainer'
import ClassifyContainer from '../containers/ClassifyContainer'
import SettingContainer from '../containers/MineContainer'
import Platform from 'Platform'
export default class MainPage extends React.Component {
  render() {
    return (
      <View style={{
        flex: 1
      }}>
        <IndicatorViewPager
          style={styles.indicatorViewPager}
          indicator={this._renderTabIndicator()}>
          <View>
            <ShortcutNavigator/>
          </View>
          <View>
            <ClassifyContainer/>
          </View>
          <View>
            <SettingContainer/>
          </View>
        </IndicatorViewPager>
      </View>
    );
  }

  _renderTabIndicator() {
    let tabs = [
      {
        text: '主页',
        iconSource: require('../imgs/home.png'),
        selectedIconSource: require('../imgs/selectedHome.png')
      }, {
        text: '分类',
        iconSource: require('../imgs/classify.png'),
        selectedIconSource: require('../imgs/selectedClassify.png')
      }, {
        text: '我的',
        iconSource: require('../imgs/setting.png'),
        selectedIconSource: require('../imgs/selectedSetting.png')
      }
    ];
    return <PagerTabIndicator tabs={tabs}/>;
  }
}

const styles = StyleSheet.create({
  indicatorViewPager: {
    flex: 1,
    paddingTop: (Platform.OS === 'ios'
      ? 20
      : 0),
    backgroundColor: 'white'
  }
});